<template>
  <div id="app" class="zoomed-container">
    <router-view></router-view>
    <!-- <HullSeat @getData="getData" :zw="9" :max="1000"></HullSeat> -->
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'App',
  components: {
  },
  data() {
    return { 
      screenWidth: window.innerWidth,
      zoom: 1
    };
  },
  methods: {
    ...mapActions(['updateScreenWidth']),
    // 一个防抖的事件处理函数，用于触发更新:cite[10]
    handleResize() {
      this.updateScreenWidth()
    }
  },
  mounted() {
    // 添加resize事件监听器，并立即调用一次以设置初始值:cite[2]:cite[7]
    window.addEventListener('resize', this.handleResize)
    this.handleResize() // 初始化调用
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听器:cite[10]
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  /* IE8 专用 */
  -ms-box-sizing: border-box;
  /* Firefox 专用 */
  -moz-box-sizing: border-box;
  /* WebKit 专用 */
  -webkit-box-sizing: border-box;
  /* IE6/7 怪异模式 hack */
}

body,
ul,
li,
p {
  margin: 0;
  padding: 0;
}
html,body{
  font-size: 19.2px;
}
span,
p,
div {
  word-break: break-all;
}

.main-con .left_main {
  margin-right: 1.04rem;
}

.main-con {
  width: 1600px;
  margin: 0 auto;
  display: flex;
  margin-top: 0;
}

.form_con {
  width: 100%;
}

/*多行文本溢出*/
.line1 {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.line2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.line4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.line5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}

body {
  padding: 0 !important;
}

html {
  overflow-y: scroll;
}

input::placeholder {
  color: #ccc;
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
  border: 3px solid #f8f8f8;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

::-webkit-scrollbar-thumb:active {
  background: #787878;
}

::-webkit-scrollbar-corner {
  background: #f8f8f8;
}

.infinite-list {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.infinite-list::-webkit-scrollbar {
  width: 0 !important;
  /* Chrome, Safari, Opera */
  height: 0 !important;
}

.btns {
  display: flex;
  justify-content: center;
}

.list_box:hover {
  border: 1px solid #1068E7 !important;
}
</style>
